<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 代码只有一句可以直接写到行内 -->
        <button v-on:click="money += 10">加10元</button>
        <!-- 此时这个事件里的代码不止一句 -->
        <!-- 那就建议调用一个函数来写 -->
        <button v-on:click="fn1">加10元后再做一个alert</button>

        <!-- 当按钮被点击，调用fn2函数，并给它传入100这个数据 -->
        <button v-on:click="fn2(100)">加任意元并alert</button>

        <hr>
        <!-- 以下是简写形式 -->
        <!-- 代码只有一句可以直接写到行内 -->
        <button @click="money += 10">加10元</button>
        <!-- 此时这个事件里的代码不止一句 -->
        <!-- 那就建议调用一个函数来写 -->
        <button @click="fn1">加10元后再做一个alert</button>

        <!-- 当按钮被点击，调用fn2函数，并给它传入100这个数据 -->
        <button @click="fn2(100)">加任意元并alert</button>


        <p>{{ money }}</p>
    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    money: 100
                }
            },
            // vue里写函数（方法）的地方
            methods: {
                fn1() {
                    // 让money+=10，如果在js中访问vue里的数据，前面要加this
                    // 在html中访问数据不用加this
                    this.money += 10
                    // 弹出alert
                    alert('我触发了')
                },

                fn2(num) {

                    this.money += num
                    // 弹出alert
                    alert('fn2触发了')
                },
            }
        })
    </script>
</body>

</html>